We Love Web – Colleges 2025

Vrijdag 12 september 2025 – College van Tolga

Vandaag kregen we een inspirerend hoorcollege van Tolga. Hij vertelde over zijn loopbaan en liet zien hoe belangrijk het is om een sterk portfolio te maken.

Onderwerpen die aan bod kwamen

• Portfolio Project: werken met TypeScript zorgde voor structuur.
• GSAP: animaties maken voor betere UX.
• Nuxt: Vue-framework voor snelle websites.

Wat ik ervan geleerd heb

• Hoe TypeScript, GSAP en Nuxt samenwerken in projecten.
• Een goed portfolio is superbelangrijk.
• Nieuwe technieken leren hoort bij de industrie.

Vrijdag 3 oktober 2025 – College van Martijn Nieuwenhuizen

Martijn Nieuwenhuizen gaf een hoorcollege over moderne webontwikkeling. Veel voorbeelden kwamen uit echte projecten.

Belangrijkste onderwerpen

• TypeScript in portfolio projecten.
• GSAP voor animaties.
• Nuxt als Vue framework.

Wat ik heb geleerd

• Hoe moderne tools samenwerken.
• Waarom een portfolio belangrijk is.
• Ik wil experimenteren met Nuxt.

Vrijdag 17 oktober 2025 – College van Vassilis

Vassilis gaf een college over Inclusive Design.

Inclusive Design principes

• Denk aan alle situaties waarin een gebruiker je site gebruikt.
• Wees consistent.
• Belangrijkste content vooraan zetten.
• Voeg alleen dingen toe die waarde hebben.

Exclusive Design (tegenovergesteld)

• Ontwerpen voor een kleine doelgroep.
• Geen rekening houden met verschillende contexten.

Vrijdag 21 november 2025 – College van Trystian (Decathlon Design System)

Trystian Offeman gaf een uitgebreid college over het Design System van Decathlon. Hij vertelde over zijn werkervaring, de teams waarin hij heeft gewerkt en waarom een Design System belangrijk is.

Waarom Decathlon een Design System heeft

• Één look & feel voor alle platformen (website, app, in-store).
• Design en engineering spreken dezelfde taal.
• Het verhoogt de kwaliteit van UI-ontwerpen.
• Het zorgt voor betere samenwerking tussen designers en developers.
• Je hoeft het wiel niet opnieuw uit te vinden.
• Alles is schaalbaar zonder kwaliteitsverlies.
• Consistentie over alle producten.

Design Tokens

Design tokens zijn de basis van het systeem. Dit zijn kleine variabelen zoals kleuren, spacing, fonts en meer. Deze worden vanuit Figma geëxporteerd en in code gebruikt.

• Voorbeeld kleur-tokens zoals cobalt-500.
• Tokens voor teksten zoals --vp-semantic-color-content-brand.
• Spacing tokens: 3XS, 2XS, XS, S, M, L, XL.
• Typografie tokens: Decathlon Sans, Inter, Arial.

Foundations van het Design System

• Spacing: grids, margins, paddings.
• Typography: consistente lettertypes.
• Color: basis- en semantic kleuren.
• Mode: Light mode & Dark mode.
• Theming: meerdere thema's beschikbaar.
• Accessibility: WCAG 2 standaard ingebouwd.

Vitamin Play – Decathlon’s UI Library

• Beschikbaar voor web, iOS, Android en zelfs horloges.
• Bevat herbruikbare UI-componenten.
• Internationale ondersteuning (ook right-to-left).
• Ondersteuning voor thema’s & modes.

Wat ik ervan geleerd heb

• Waarom grote bedrijven een Design System nodig hebben.
• Hoe design tokens werken en hoe developers ze gebruiken.
• Hoe design en development beter kunnen samenwerken.
• Hoe belangrijk consistentie is in UI-design.
• Wat een grote rol Figma speelt in moderne teams.

Vrijdag 12 december 2025 – College van Brian Bors (Digitale Toegankelijkheid)

Social Model of Disability

Beperkingen ontstaan door de omgeving (zoals een slecht ontworpen website), niet door de persoon.

WCAG – Web Content Accessibility Guidelines

3 niveaus: A, AA, AAA — gebaseerd op 4 principes (POUR):

• Perceivable: output is waarneembaar.
• Operable: bediening is mogelijk met muis, toetsenbord, of andere input.
• Understandable: gebruiker moet begrijpen wat de site doet.
• Robust: werkt met huidige en toekomstige hulpsoftware.

Meest afgekeurde succescriteria

• 1.3.1 – Info & Relaties: structuur mag niet alleen visueel zijn.
• 4.1.2 – Name, Role, Value: interactieve elementen moeten naam, rol en status hebben.

WCAG technologie-agnostisch

Toepasbaar op web, apps, games, documenten, informatiezuilen en meer.

Tekstalternatieven (1.1.1)

Alle niet-tekst content heeft een alt-tekst, behalve in uitzonderingsgevallen.

ARIA

Set van extra attributen voor toegankelijkheid. Eerst goede HTML gebruiken!

No ARIA is better than bad ARIA.

Curb Cut Effect

Ontwerp bedoeld voor toegankelijkheid helpt iedereen (zoals schuine stoepranden).

Waarom je niet alles automatisch kunt testen

• Context ontbreekt voor robots
• Slechts ~25% kan automatisch getest worden
• Menselijke beoordeling blijft nodig

Wat ik heb geleerd

• Toegankelijk design zorgt voor inclusiviteit én betere vindbaarheid.
• Semantische HTML is essentieel.

Gastcollege – Marcel Fleuren (101 Coding Collective)

Marcel Fleuren gaf een gastcollege over werken als developer bij startups. Hij werkt bij het 101 Coding Collective en helpt bedrijven met het bouwen van software.

Wat hij doet

• Full-stack development voor startups en scale-ups.
• Coachen van agile development teams.
• Werkt als fractional CTO voor beginnende bedrijven.

Belangrijkste punten uit het college

• Duidelijke en begrijpelijke code is belangrijker dan slimme code.
• Samenwerken in een team is essentieel.
• Problemen zo snel mogelijk oplossen.
• Veel werken met bestaande systemen, zoals AWS.

Voorbeeld uit de praktijk

• Een mobiele app gebouwd met React Native.
• Koppeling met een bestaand AWS-systeem.
• Gebruik van data om het product te verbeteren.

Wat ik ervan geleerd heb

• Dat simpele code beter is dan complexe oplossingen.
• Dat software stap voor stap wordt ontwikkeld.
• Dat onzekerheid normaal is bij het begin van een project.

Vrijdag 13 februari 2026 – College van Susan Lau (CampSpace)

Susan Lau gaf een college over webarchitectuur, performance en hoe data efficiënt wordt verwerkt binnen een professionele productieomgeving. Ze liet zien hoe belangrijk samenwerking tussen frontend en backend is.

Belangrijkste onderwerpen

• Elasticsearch: gebruiken voor snelle en schaalbare zoekfunctionaliteit.
• Database queries: zo min mogelijk queries per pagina (liefst één goede query).
• Pagination: data verdelen over meerdere pagina’s voor betere performance.
• Frontend & Backend overleg: bepalen waar data wordt verwerkt (soms al in de backend).
• JSON requests (GET): data ophalen via API-structuur.

Templating & Code

• Werken met Twig als template engine.
• Belangrijk om de syntax van Liquid (of andere template talen) goed te kennen.
• Blijf gebruikmaken van if-statements waar nodig.
• DRY-principe: Don’t Repeat Yourself.
• Component-based denken: alles logisch structureren.

Performance & Structuur

• Laad niet onnodig veel data tegelijk.
• Gebruik filtering met duidelijke feedback voor de gebruiker.
• Zorg dat filters feedforward en feedback geven.
• Werk zo dicht mogelijk bij de productieomgeving.
• Gebruik echte content in plaats van dummy-teksten.

AI in development

• Gebruik AI als hulpmiddel wanneer nodig.
• Leer kritisch omgaan met AI-output.
• Blijf zelf logisch nadenken.

Wat ik ervan geleerd heb

• Hoe belangrijk efficiënte database-structuur is.
• Dat performance begint bij goede backend-keuzes.
• Dat frontend en backend goed moeten samenwerken.
• Dat productiegericht werken essentieel is.

Vrijdag 6 maart 2026 – College van Robin van der Heijden (Q42)

Robin van der Heijden is een oud-student van FDND en is vorig jaar afgestudeerd. Sindsdien werkt hij bij Q42, waar hij onder andere werkt aan de NRC Puzzelhub. Tijdens dit college vertelde hij over accessibility en waarom toegankelijkheid veel meer is dan alleen een checklist.

Robin liet ook zijn eigen website zien: punch.baby

Wat is Svelte?

Robin noemde ook Svelte. Svelte is een framework voor dynamische websites. Het is gebouwd op JavaScript en helpt bij het ophalen van data en het aanpassen van onderdelen van een website. Hierdoor kun je interactieve websites bouwen op een efficiënte manier.

Belangrijkste onderwerpen uit het college

• Accessibility is meer dan alleen voor blinde of dove mensen.
• Accessibility = enhancement: het verbetert de ervaring voor iedereen.
• Veel mensen vinden accessibility saai, terwijl het juist veel waarde toevoegt.
• De ervaring van een website voelt vaak soepeler en duidelijker aan.
• Gebruikers krijgen soms meer tijd om te lezen of begrijpen beter hoe iets werkt.
• Het moet duidelijk zijn dat je iets kunt sluiten, pauzeren of bedienen.
• Werk met responsive, accessible, performant en progressively enhanced components.

Voorbeelden van accessibility in de praktijk

• Screenreader-only classes voor extra uitleg aan screenreaders.
• Hintknoppen en duidelijke bediening voor puzzels of interactieve elementen.
• Pauzeknoppen voor animaties of bewegende onderdelen.
• Rekening houden met prefers-reduced-motion om animaties te verminderen.
• Crossfade en andere animaties moeten ook toegankelijk blijven.

Accessibility in het werkveld

Robin vertelde dat het werkveld nog flink achterloopt op het gebied van toegankelijkheid. Er komt Europese wetgeving voor digitale toegankelijkheid, maar veel bedrijven voldoen daar nog niet aan. Vaak begint een taak met een ticket of issue op een projectboard, terwijl degene die het aanmaakt niet altijd genoeg van accessibility weet.

Belangrijke inzichten

• Accessibility is niet alleen voor mensen die het “nodig hebben”, maar voor iedereen.
• Verbeteringen voor toegankelijkheid maken de algemene gebruikerservaring beter.
• Niet alle problemen gaan over blindheid; er zijn veel meer redenen waarom toegankelijkheid belangrijk is.
• Sommige onderdelen, zoals een sudoku, zijn lastig volledig toegankelijk te maken.
• Toegankelijkheid geeft extra waarde aan een product of website.

Wat ik ervan geleerd heb

• Dat accessibility de ervaring van iedere gebruiker kan verbeteren.
• Dat toegankelijkheid niet alleen een technische eis is, maar ook een kwaliteitsverbetering.
• Dat het werkveld nog achterloopt, maar dat deze kennis juist heel waardevol is.
• Dat ik trots mag zijn op kennis van accessibility, omdat dit in de praktijk echt verschil maakt.